import React from 'react';
import * as THREE from 'three';

export default function Index() {
  const refWrap = React.createRef();
  const refCanvas = React.createRef();

  const init = () => {
    refCanvas.current.width = refWrap.current.clientWidth;
    refCanvas.current.height = refWrap.current.clientHeight;

    let scene = new THREE.Scene();

    let camera = null;
    const initCamera = () => {
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 500);
      camera.position.set(0, 0, 100);
      camera.lookAt(0, 0, 0);
    };
    initCamera();

    let light = null;
    const initLight = () => {
      light = new THREE.DirectionalLight(0xff0000, 1.0, 1);
      light.position.set(100, 100, 200);
      scene.add(light);
    };
    initLight();

    const initObject = () => {
      const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
      const points = [];
      points.push(new THREE.Vector3(-20, 0, 0));
      points.push(new THREE.Vector3(0, 10, 0));
      points.push(new THREE.Vector3(10, 0, 0));
      const geometry = new THREE.BufferGeometry().setFromPoints(points);

      const line = new THREE.Line(geometry, material, THREE.LineSegments);
      scene.add(line);
      // let geometry = new THREE.BufferGeometry();
      // const material = new THREE.LineBasicMaterial();
      // const color1 = new THREE.Color(0x444444);
      // const color2 = new THREE.Color(0xff0000);
      // const p1 = new THREE.Vector3(-100, 0, 0);
      // const p2 = new THREE.Vector3(100, 0, 0);
      // geometry.vertices.push(p1);
      // geometry.vertices.push(p2);
      // geometry.color.push(color1, color2);
      // const line = new THREE.Line(geometry, material, THREE.LineSegments);
      // scene.add(line);
    };
    initObject();

    const renderer = new THREE.WebGLRenderer({ canvas: refCanvas.current, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  };

  React.useEffect(() => {
    init();
  }, []);

  return (
    <div ref={refWrap} style={{ width: '100%', height: '100%' }}>
      <canvas ref={refCanvas}></canvas>
    </div>
  );
}
